<template>
  <div class="app-container">
    <div class="syl-group">
      <div class="syl-title">
        <h4>订单信息
          <el-button type="warning" size="small" v-html="getStatus(queryNames.orderStatus)" />
          <el-button type="primary" size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
        </h4>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <p class="syl-information">订单编号:
              <span v-html="getNullNames(queryNames.orderNo)" />
            </p>
            <p class="syl-information">订单时间:
              <span v-html="getNullNames(queryNames.createTime)" />
            </p>
            <p class="syl-information">订单数量:
              <span v-html="getNullNames(queryNames.packageNum)+'份'" />
            </p>
            <p class="syl-information">配送地址:
              <span v-html="getNullNames(queryNames.sendAddress)" />
            </p>
          </el-col>
          <el-col :span="8">
            <p class="syl-information">企业名称:
              <span v-html="getNullNames(queryNames.companyName)" />
            </p>
            <p class="syl-information">付款时间:
              <span v-html="getNullNames(queryNames.paymentTime)" />
            </p>
            <p class="syl-information">订单金额:
              <span v-html="getNullNames(queryNames.orderMoney)" />
            </p>
          </el-col>
          <el-col :span="8">
            <p class="syl-information">联系方式:
              <span v-html=" getNullNames(queryNames.contactName) + getNullNames(queryNames.contactPhone)" />
            </p>
            <p class="syl-information">预计送达时间:
              <span v-html="getNullNames(queryNames.arrivalTime)" />
            </p>
            <p class="syl-information">配送方式:
              <span v-html="getNullNames(queryNames.sendMethod)" />
            </p>
          </el-col>
          <el-col :span="24">
            <p class="syl-information" style="margin: 0">备注信息:
              <span v-html="getNullNames(queryNames.requireNote)" />
            </p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-if="detailsList.length>0" class="syl-group">
      <div class="syl-title">
        <h4>订单详情</h4>
        <el-divider />
        <div v-for="item in detailsList" :key="item.packageId" style="height: 70px;display: inline-block;margin: 0 8px">
          <span class="syl-details" v-html="item.packageName" />
          <span class="syl-share" v-html="item.packageNum+'份'" />
        </div>
      </div>
    </div>
    <div v-if="distributionStoreList && distributionStoreList.length > 0" class="syl-group">
      <div class="syl-title">
        <h4 v-html="'配送门店:'" />
        <el-divider />
        <el-row v-for="(item,index) in distributionStoreList" :key="index+item.orderId" :gutter="20">
          <el-col :span="8">
            <p class="syl-information">门店名称:
              <span v-html="item.storeName" />
            </p>
            <p class="syl-information">分配时间:
              <span v-html="item.deliveryTime" />
            </p>
          </el-col>
          <el-col :span="8">
            <p class="syl-information">联系方式:
              <span v-html="item.contactName+':'+ item.contactPhone" />
            </p>
            <p class="syl-information">分配数量:
              <span v-html="item.deliveryNum+'份'" />
            </p>
          </el-col>
          <el-col :span="8">
            <p class="syl-information">门店地址:
              <span v-html="item.adress" />
            </p>
            <p class="syl-information">门店状态:
              <span v-html="getStatus(queryNames.orderStatus)" />
            </p>
          </el-col>
          <el-col :span="24">
            <span style="font-size: 16px;font-weight: 600;color: #333333;">分配详情:</span>
            <div
              v-for="(i,j) in item.distributionDetailList"
              :key="j+i.id"
              style="height: 40px;display: inline-block;margin: 0 8px"
            >
              <span class="syl-details" v-html="i.packageName" />
              <span class="syl-share" v-html="i.packageNum+'份'" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-show="status===10" class="syl-title">
      <h4 v-html="'退款信息:'+ queryName.service">已送达</h4>
      <el-row :gutter="20">
        <el-col :span="8">
          <p>退款时间：2021-01-23 15:22:50</p>
          <p>分配时间：2021-01-23 15:16:48</p>
          <p>退款数量：3</p>
        </el-col>
        <el-col :span="8">
          <p>退款金额：￥30.00</p>
          <p>退货理由：餐食破损或漏洒</p>
          <p>退货明细： <span>红烧肉套餐   x12</span>
            <span>小炒牛肉套餐 x12</span>
            <span>宫保鸡丁套餐 x12</span></p>
        </el-col>
        <el-col :span="8">
          <p>退款方式：原路返还</p>
          <p>审核人员：王建国</p>
          <p>审核时间：2021-01-23 15:30:27</p>
        </el-col>
      </el-row>
    </div>
    <el-button
      v-if="getOrderStatus(status,distributionStoreList)"
      type="primary"
      size="small"
      class="syl-boutton"
      @click="handlAdd"
    >指定门店
    </el-button>
    <!-- 添加或修改门店对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="指定门店" prop="storeId">
          <el-select v-model="form.storeId" filterable placeholder="请选择门店" style="width: 320px">
            <el-option
              v-for="(item,index) in storeList"
              :key="index+item.storeId"
              :label="item.storeName+' --- '+'剩余产能'+item.capacity"
              :value="item.storeId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-button
      v-if="getOrders(status)"
      type="primary"
      size="small"
      @click="handleFinishedOrder"
    >完成订单
    </el-button>
  </div>
</template>
<script>
import { getCompanyOrderInfo, orderSpecifyStore, updateOrderStatus, surplusCapacity } from '@/api/order'
import serverMap from '../../../../../config/serverMap'

export default {
  name: 'Index',
  data() {
    return {
      // 展示参数
      queryName: {
        service: '已送达',
        orderNumber: '019284355234'
      },
      queryNames: {
        arrivalTime: null,
        companyId: null,
        companyName: null,
        contactName: null,
        contactPhone: null,
        createId: null,
        createTime: null,
        delFlag: null,
        id: null,
        orderMoney: null,
        orderNo: null,
        orderStatus: null,
        orderTime: null,
        packageNum: null,
        paymentMethod: null,
        paymentTime: null,
        remarks: null,
        requireNote: null,
        sendAddress: null,
        sendMethod: null,
        sendTime: null,
        updateId: null,
        updateTime: null,
        version: null
      },
      // 订单状态
      valueStatus: [
        { value: 1, label: '点餐中' },
        { value: 2, label: '未支付' },
        { value: 3, label: '已支付' },
        { value: 4, label: '已接单' },
        { value: 5, label: '代配送' },
        { value: 6, label: '配送中' },
        { value: 7, label: '已送达' },
        { value: 8, label: '支付超时' },
        { value: 9, label: '取消订单' }
      ],
      // 订单详情数据
      detailsList: [],
      // 指定门店
      distributionStoreList: [],
      // 订单ID
      id: '',
      // 遮罩层
      open: false,
      loading: false,
      // 指定门店数据
      storeList: [],
      // 标题
      title: '',
      // 状态
      status: 1,
      // 表单
      form: {
        orderId: undefined,
        storeId: undefined
      },
      rules: {
        storeId: [
          { required: true, message: '门店不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.id = this.$route.query.id
  },
  mounted() {
    this.getList()
    this.getStoreList()
  },
  methods: {
    /** 指定门店数据 **/
    getList() {
      const id = this.id
      if (id !== undefined && id !== null) {
        getCompanyOrderInfo(id).then(res => {
          const { orderDetailList, order, distributionStoreList } = res.data
          this.detailsList = orderDetailList
          this.queryNames = order
          if (JSON.stringify(distributionStoreList) !== '[]') {
            this.distributionStoreList = distributionStoreList
          }
          this.status = order.orderStatus
        })
      }
    },
    /** 获取门店数据 **/
    getStoreList() {
      surplusCapacity().then(res => {
        this.storeList = res.data
      })
    },
    /** 指定门店 **/
    handlAdd() {
      this.title = '指派门店'
      this.open = true
      this.reset()
    },
    // 取消
    cancel() {
      this.open = false
    },
    // 表单重置
    reset() {
      this.disabled = false
      this.loading = false
      this.form = {
        orderId: this.id,
        storeId: undefined
      }
      this.resetForm('form')
    },
    /** 提交门店 **/
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true
          orderSpecifyStore(this.form).then(res => {
            if (!res.code) {
              this.open = false
              this.loading = false
              this.disabled = false
              this.msgSuccess('指定门店成功')
              this.getList()
              this.getStoreList()
            }
          })
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
    /** 订单状态回显 **/
    getStatus(value) {
      if (value !== null && value !== undefined) {
        const name = this.valueStatus.find(item => item.value === value)
        return name.label
      }
    },
    handleFinishedOrder() {
      this.$confirm('确定完成订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        dangerouslyUseHTMLString: false,
        type: 'warning'
      }).then(() => {
        return updateOrderStatus(this.$route.query.id, 7)
      }).then(() => {
        this.getList()
      }).catch(() => {
      })
    },
    /** 订单状态判断 **/
    getOrderStatus(status) {
      if (status === 3) {
        return true
      }
    },
    getOrders(status) {
      if (status === 4) {
        return true
      }
    },
    /** 订单详情导出 **/
    handleExport() {
      const id = this.id
      const data = {
        orderId: id
      }
      window.location.href = serverMap.base + '/api/order/exportCompanyAllEmployeeOrderListByDay?orderId=' + data.orderId
    }
  }
}
</script>

<style lang="scss" scoped>
.syl-title {
  width: 100%;
  h4 {
    margin: 19px 0;
  }
  .syl-information {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-right: 10px;
    span {
      font-size: 16px;
      font-weight: 500;
      color: #666666;
    }
  }
  .syl-details {
    text-align: center;
    color: #333333;
    font-size: 16px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #EBF6FF;
    padding: 9px 15px;
  }

  .syl-share {
    color: #666666;
    font-size: 16px;
    padding: 9px 15px;
    background: #EBF6FF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #EBF6FF;
    margin-left: -5px;
  }
}

.syl-group {
  margin: 10px 0;
}

.syl-boutton {
  margin-top: 20px;
}
</style>
